<!--左按钮，右搜索-->
<div class="toolbar margin-bottom btn-and-search" [ngClass]="isMobile?'wrap-mobile':'wrap'">
  <div class="item" [ngClass]="isMobile?'item-mobile':''" nz-col nzXs="4" nzSm="4" nzMd="14" nzLg="14" nzXl="18">
    <button nz-button nzType="primary" (click)="addRole()" >
      <i nz-icon nzType="plus" nzTheme="outline"></i>
      <span *ngIf="!isMobile">添加</span>
    </button>
  </div>

  <div class="item" [ngClass]="isMobile?'item-mobile':''" nz-col nzXs="20" nzSm="20" nzMd="10" nzLg="10" nzXl="6">
    <nz-input-group nzSearch [nzAddOnAfter]="suffixIconButton">
      <input type="text" nz-input placeholder="角色名称" [(ngModel)]="pageHelper.keyword"/>
    </nz-input-group>
    <ng-template #suffixIconButton>
      <button nz-button nzType="primary" nzSearch (click)="search()"><i nz-icon nzType="search"></i></button>
    </ng-template>
  </div>

</div>

<div [ngClass]="isMobile?'wrap-mobile':'wrap'">
  <nz-tabset nzType="card" [nzSelectedIndex] = "tabsIndex" (nzSelectedIndexChange) = "selectedIndexChange($event)">
    <nz-tab nzTitle="平台、合作伙伴"></nz-tab>
    <nz-tab nzTitle="运营商"></nz-tab>
  </nz-tabset>

  <nz-table #nzTable [nzData]="roleList"
            [nzFrontPagination]="false"
            [nzTotal]="pageHelper.totalItems"
            [nzPageIndex]="pageHelper.currentPage"
            [nzPageSize]="pageHelper.pageSize"
            (nzPageIndexChange)="nzPageIndexChange($event)"
            nzTableLayout="fixed" [nzScroll]="{ x: 'auto' }" >
    <thead>
    <tr>
      <th>ID</th>
      <th>名称</th>
      <th>类型</th>
      <th>排序</th>
      <th>描述</th>
      <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <ng-container *ngFor="let data of nzTable.data let i =index">
      <tr>
        <td nzEllipsis>{{ i + 1}}</td>
        <td nzEllipsis>{{ data.name }}</td>
        <td nzEllipsis>
          {{ data.agencyId == 0 ? '系统' : '私有' }}
        </td>
        <td nzEllipsis>{{ data.sort }}</td>
        <td nzEllipsis>{{ data.desc }}</td>
        <td nzEllipsis>
          <a (click)="update(data)">编辑</a>
          <nz-divider nzType="vertical"></nz-divider>
          <a (click)="assignPermissions(data)">分配权限</a>
          <nz-divider nzType="vertical"></nz-divider>
          <a (click)="delete(data.id)">删除</a>
        </td>
      </tr>
    </ng-container>
    </tbody>
  </nz-table>
</div>

<app-role-permission [isVisible]="isVisible" (emitVisible)="setVisiblePermission($event)"
                     [role]="role"></app-role-permission>

<app-role-edit [isVisible]="isVisibleEdit" (emitVisible)="setVisibleEdit($event)" [role]="role"></app-role-edit>

